bootstrap 的格線系統非常有名
其主要是將整個網頁分成12等份，
為什麼是12等份呢!??
因為一般網頁佈局大多為 三欄、四欄、六欄的佈局，
為了讓這些需求都能被滿足，於是就取了大家的最小公倍數嘍

而這些格線要怎麼樣操作呢!?
格線的操作都是利用className來區分

自動分欄

class="col" >>> bootstrap 會依照頁面的寬度來決定欄數

    <div class="container">
        <!--classname="col" 表示不固定欄數-->
        <div class="row">
            <div class="col">
                <div class="item">
                    <img src="https://picsum.photos/300/200?random=10" alt="" class="w-100" />
                    <p> ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque voluptas, beatae quae
                        amet quos sint veritatis? Dicta, et cupiditate.</p>
                </div>
            </div>
            <div class="col">
                <div class="item">
                    <img src="https://picsum.photos/300/200?random=11" alt="" class="w-100" />
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque voluptas, beatae quae
                        amet quos sint veritatis? Dicta, et cupiditate.</p>
                </div>
            </div>
            <div class="col">
                <div class="item">
                    <img src="https://picsum.photos/300/200?random=12" alt="" class="w-100" />
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque voluptas, beatae quae
                        amet quos sint veritatis? Dicta, et cupiditate.</p>
                </div>
            </div>
            <div class="col">
                <div class="item">
                    <img src="https://picsum.photos/300/200?random=16" alt="" class="w-100" />
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque voluptas, beatae quae
                        amet quos sint veritatis? Dicta, et cupiditate.</p>
                </div>
            </div>
        </div>

    </div>

固定欄寬(ex.分成三欄)

將頁面欄位數分成三欄只要把class="col"改成class="col-4" , 4代表，(3/12)
就可以簡單的控制要顯示的欄位數

依照裝置大小來顯示欄位置

bootstrap有支援多種裝置的顯示方式，而每一個size的界線我們稱之為斷點(breakpoint)

圖片來源:https://v5.getbootstrap.com/docs/5.0/layout/breakpoints/

裡面的裝置包含，手機，平板(直)，平板(橫)，一般電腦螢幕
所以，我們就可以依照使用者的裝置，來呈現不同的欄位數

以下方程式碼為例，
如果使用者用的是PC大螢幕尺寸大於1400px，會套用col-xxl-2這個class看到的欄位數為(2/12) 六欄的資料;
如果使用者使用的螢幕尺寸為平板(直向 768px)，則會套用col-md-4這個class，所以會顯示三欄的資料

<div class="col-12 col-md-4 col-lg-3 col-xxl-2">
    <div class="item">
        <img src="https://picsum.photos/300/200?random=10" alt="" class="w-100" />
        <p> ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque voluptas, beatae quaeamet quos sint veritatis? Dicta, et cupiditate.</p>
    </div>
</div>

另外，還有一種方式也可以用來控制欄數，我們就留到下次談吧!!